<template>
  <div>
    <table>
     <th>欢迎光临_vue开发的收银系统_水果店</th>
     <tr>苹果 {{ msg}}元/斤,折扣{{msg2}}折</tr>
     <tr>请输入您要购买的斤数
       <input type="number" v-model.number="num">
     </tr>
     <tr>
       <button @click="btn">结账买单</button>
     </tr>
     <tr>结账单:总结:
       <span>{{total }}</span>
       ￥元 折后价：
       <span>{{preferential }}</span>
       ￥元 省了：
       <span>{{reduced }}</span>
       ￥元
     </tr>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num:"",
      msg:10,
      msg2:8,
      total:"",
      preferential :"",
      reduced:""
    }
  },
     methods: {
       btn(){
         this.total = this.msg * this.num 
         this.preferential = this.msg2 * this.num 
         this.reduced = this.total - this.preferential
       }
     }
}
</script>

<style>

 table {
   border: 1px solid #000;
   height: 200px;
   width: 800px;
   text-align: center;
    border-collapse:collapse;
    line-height:  40px;
    margin: 0 auto;
 }
 tr {
  border: solid 1px #000;
 }
</style>